<template>
  <home-layout class="home">
    <!-- 头部导航栏 -->
    <template #header>
      <van-search
        v-model="courseNameSearchKey"
        placeholder="请输入课程名称"
        @search="onCourseSearch"
      />
    </template>
    <!-- 课程状态选项卡 -->
    <van-tabs v-model="tabActiveName">
      <van-tab
        title="进行中"
        :name="1"
      />
      <van-tab
        title="已结束"
        :name="2"
      />
      <van-tab
        title="未开始"
        :name="0"
      />
    </van-tabs>
    <!-- 课程列表 -->
    <van-list
      v-model="listLoading"
      :finished="listFinish"
      finished-text="我是有底线的"
    >
      <van-cell-group
        v-for="course in courseList "
        :key="course.id"
        class="course-item"
        inset
      >
        <van-cell
          :title="course.teachClassName"
          :label="course.teacherName"
          is-link
          @click="routeToCourseDetail(course)"
        >
          <template #icon>
            <van-icon
              name="http://codefishmc.top/course-icon/course_1_example.png"
              style="margin-right: 10px;"
              size="50"
            />
          </template>
        </van-cell>
      </van-cell-group>

    </van-list>

  </home-layout>
</template>

<script>
import HomeLayout from '@/views/layout/HomeLayout.vue'
import { Search, Tab, Tabs, List, Cell, CellGroup, Icon } from 'vant'

import { listStudentMineCourse, listTeacherMineCourse } from '@/api/bussiness/course/mineCourse'

export default {
  name: 'Course',
  components: {
    HomeLayout,
    [Search.name]: Search,
    [Tab.name]: Tab,
    [Tabs.name]: Tabs,
    [List.name]: List,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Icon.name]: Icon
  },
  data () {
    return {
      courseNameSearchKey: '', // 课程搜索关键字
      tabActiveName: 1, // tab激活名称
      listLoading: false, // list是否处于加载状态
      listFinish: true, // list是否加载完数据
      courseList: [// 课程列表数据
      ],
      userType: 1, // 1学生 2教师
      memberInfo: {} // 个人信息
    }
  },
  computed: {
    queryFormData () { // 课程列表查询参数
      const data = {}
      data.courseStatus = this.tabActiveName
      if (this.userType === 1) {
        const { classId, stuNo } = this.memberInfo
        data.studentInfo = { classId, stuNo }
      } else if (this.userType === 2) {
        const { workerNo } = this.memberInfo
        data.teacherInfo = { workerNo }
      }
      return data
    }
  },
  watch: {
    tabActiveName (val) {
      this.refreshCourseList()
    }
  },
  created () {
    this.initUserData()
  },
  methods: {
    // 获取用户类型和人员信息
    initUserData () {
      this.$store.dispatch('user/getMemInfo').then(({ memberInfo, userType }) => {
        this.memberInfo = memberInfo
        this.userType = userType
        this.refreshCourseList()
      })
    },
    // 获取课程列表
    refreshCourseList () {
      if (this.userType === 1) {
        listStudentMineCourse(this.queryFormData).then(({ data }) => {
          this.courseList = data
        })
      } else if (this.userType === 2) {
        listTeacherMineCourse(this.queryFormData).then(({ data }) => {
          this.courseList = data
        })
      }
    },
    // 搜索课程
    onCourseSearch () {
      console.log('搜索课程：' + this.courseNameSearchKey)
    },
    // 跳转课程详情页
    routeToCourseDetail (course) {
      this.$router.push({
        name: 'CourseDetail',
        query: {
          courseId: course.id,
          userType: this.userType
        },
        params: { courseName: course.teachClassName }
      })
    }
  }
}
</script>

<style scoped>
.course-item {
  margin-top: 1.2em;
}
</style>
